<template>
  <div class="production-manage" v-if="showPackVisibleDialog">
    <div class="production-options">
      <el-breadcrumb class="production-options-breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-for="(route,index) in selectedStationRoute" :key="index" class="pob">
          <i :class="route.icon"></i>
          <span @click="onPositioning(route,index)">
            {{ route.name }}
          </span>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-date-picker class="logger-o" v-if="selectedStationRoute.length===2"
                        @change="onChangeDate"
                        value-format="yyyy-MM" v-model="productionTime" type="month" range-separator="至"
                        start-placeholder="日志开始日期" end-placeholder="日志结束日期" align="right">
        </el-date-picker>
        <el-input class="production-options-input" v-model="packNumber" placeholder="请输入箱体码检索">
          <el-button slot="append" icon="el-icon-search" @click="findByPackNumber"></el-button>
        </el-input>
      </div>
    </div>
    <div class="file-group-list" v-if="selectedStationRoute.length<=2&&findPackNumber===null">
      <div :class="['file-group',selectFolderIndex===index?'file-group-click':'']" v-for="(item,index) in stations"
           :key="index" @click="selectFolder(item,index)">
        <folder></folder>
        <h5 class="folder-name">{{ item.name }}</h5>
      </div>
    </div>
    <div class="group-detail-list" v-else>
      <div class="group-detail-header">
        <div>图片</div>
        <div>条码</div>
        <div>员工号</div>
        <div>站点号</div>
        <div>时间</div>
      </div>
      <div class="group-detail-info">
        <div v-for="(item,index) in stations" :key="index" class="file-detail-info">
          <div>
            <img :src="item.ImagePath" @click="selectBigImage(item)"/>
          </div>
          <div>{{ item.PackNumber }}</div>
          <div>{{ item.EmployeeNumebr }}</div>
          <div>{{ item.StationNumber }}</div>
          <div>{{ formatCreatedDate(item) }}</div>
        </div>
      </div>
    </div>
    <preview v-if="showBigImage" :images="sourceImage" @close="onClose"></preview>
  </div>
</template>
<script>
module.exports = {
  components: {
    preview: httpVueLoader('../components/Preview.vue'),
    folder: httpVueLoader('../components/FolderIcon.vue')
  },
  props: {
    show: { type: Boolean, default: false }
  },
  watch: {
    show (v) {
      this.showPackVisibleDialog = v;
      if (v) {
        this.selectedStationRoute = [{ name: '首页', icon: 'el-icon-s-home', type: 'home' }];
        this.searchProductionBtn();
      }
    }
  },
  data () {
    return {
      sourceImage: [],
      showBigImage: false,
      stations: [],
      selectFolderIndex: null,
      showPackVisibleDialog: false,
      packDetailPackNumber: null,
      packNumber: null,
      findPackNumber: null,
      productionTime: null,
      folderClickNumber: 0,
      currentSelectedStationName: null,
      selectedStationRoute: [{ name: '首页', icon: 'el-icon-s-home', type: 'home' }],
    }
  },
  methods: {
    onClose () {
      this.showBigImage = false;
    },

    /**
     * 根据条码检索
     */
    findByPackNumber () {
      if (IsEmpty(this.packNumber)) {
        this.findPackNumber = null;
        this.searchProductionBtn();
        return;
      }
      this.findPackNumber = this.packNumber;
      GetStationListByPackNumber(this.findPackNumber).then(r => {
        console.log(r);
        if (r.Status) {
          this.stations = r.Data;
        }
      });
    },
    /**
     * 监听修改值的变化
     */
    onChangeDate () {
      console.log(this.productionTime);
      if (IsEmpty(this.productionTime)) {
        return;
      }
      let current = new Date(this.productionTime);
      const year = current.getFullYear();
      const month = current.getMonth();
      let day = new Date(year, month + 1, 0).getDate();

      let startTime = this.productionTime + '-01 00:00:00';
      let endTime = this.productionTime + '-' + day + ' 23:59:59';

      let time = { type: 'station', st: startTime, et: endTime };
      this.openFolder(time);
    },

    /**
     * 面包屑点击事件
     */
    onPositioning (item, index) {
      console.log(1231);
      if (this.selectedStationRoute.length - 1 === index) {
        return;
      }
      this.stations = [];
      this.packNumber = null;
      this.findPackNumber = null;
      if (item.type === 'home') {
        this.searchProductionBtn();
      } else {
        item.time = new Date();
        this.openFolder(item);
      }
      this.selectedStationRoute.splice(index + 1, this.selectedStationRoute.length - index);
    },

    /**
     * 格式化创建时间
     * @param item
     * @returns {string}
     */
    formatCreatedDate (item) {
      return dateFormatStr(item.CreatedDate);
    },
    selectBigImage (item) {
      this.showBigImage = true;
      this.sourceImage = [{ fileUrl: item.ImagePath }];
    },

    /**
     * 选择文件交，或者打开文件夹
     * @param item
     * @param index
     */
    selectFolder (item, index) {
      if (item.type == 'station') {
        this.currentSelectedStationName = item.name;
      }
      if (!IsEmpty(this.selectFolderIndex) && this.selectFolderIndex === index && this.folderClickNumber === 1) {
        item.time = new Date();
        this.openFolder(item);
        this.selectedStationRoute.push(item);
      } else {
        this.selectFolderIndex = index;
      }
      this.folderClickNumber++;
      setTimeout(() => {
        this.folderClickNumber = 0;
      }, 300);
    },

    /**
     * 打开文件夹
     *
     * @param item
     */
    openFolder (item) {
      let startTime = 0;
      let endTime = 1;
      let current = item.time;
      let timeType = 0;
      if (item.type == 'station') {
        startTime = item.st;
        endTime = item.et;
      } else {
        timeType = 1;
        startTime = dateFormatStr(new Date(item.CreatedDate), 'yyyy-MM-dd 00:00:00');
        endTime = dateFormatStr(new Date(item.CreatedDate), 'yyyy-MM-dd 23:59:59');
      }
      GetStationList(this.currentSelectedStationName, timeType, startTime, endTime).then(r => {
        console.log(r);
        if (r.Status) {
          this.stations = r.Data;
        }
      });
    },

    /**
     * 检测生产数据按钮
     */
    searchProductionBtn () {
      let s = localStorage.getItem('service');
      if (!IsEmpty(s)) {
        this.stations = [];
        s = JSON.parse(s);
        let name = s.station.split(',');
        let current = new Date();
        let startTime = dateFormatStr(new Date(current.getTime() - 1000 * 60 * 60 * 24 * 30), 'yyyy-MM-dd 00:00:00');
        let endTime = dateFormatStr(current, 'yyyy-MM-dd 23:59:59');

        for (let nameElement of name) {
          this.stations.push({ name: nameElement, type: 'station', st: startTime, et: endTime })
        }
      }
    },
    },

}

</script>
<style scoped>
.production-manage {
  user-select: text;

  .group-detail-list {
    padding: 0 50px;

    .group-detail-header {
      display: flex;
      margin: 10px 0;

      > div {
        width: 220px;
        border-right: 1px solid #D6D6D6;
        margin-right: 10px;
        font-weight: bold;
      }
    }

    .group-detail-info {
      overflow-y: auto;
      height: 500px;

      .file-detail-info {
        display: flex;

        > div {
          width: 220px;
          margin-right: 10px;
          line-height: 38px;

          > img {
            width: 100px;
            height: 100px;
          }
        }


      }
    }
  }

  .file-group-list {
    display: flex;
    flex-wrap: wrap;

    .file-group {
      margin: 10px;
      border-radius: 6px;
      width: 225px;
      height: 225px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: relative;

      .folder-name {
        position: absolute;
        bottom: 8px;
        user-select: none;
      }
    }

    .file-group-click {
      background-color: #CCE8FF;
    }

    .el-icon-folder-opened {
      font-size: 125px;
      color: #ffd500;
    }
  }

  .file-group:hover {
    background-color: #E5F3FF;
  }


  .production-options {
    display: flex;
    padding: 10px 20px;
    border-bottom: 1px solid #D6D6D6;
    align-items: center;

    .production-options-breadcrumb {
      justify-content: flex-start;
      user-select: none;

      .pob {
        cursor: pointer;
      }
    }

    .logger-o {
      width: 380px;
      margin-right: 10px
    }

    > div {
      flex: 1;
      display: flex;
      justify-content: flex-end;

    }

    .production-options-input {
      width: 300px;
      margin-right: 10px;
    }
  }
}
</style>
